<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>无缝滚动</title>
		<style type='text/css'>
			* {
				margin: 0;
				padding: 0;
			}
			
			#box {
				position: relative;
				margin: 100px auto;
				width: 480px;
				height: 110px;
				border: 1px black solid;
				overflow: hidden;
			}
			
			#box ul {
				position: absolute;
				left: 0;
				top: 5px;
			}
			
			#box ul li {
				float: left;
				width: 100px;
				height: 100px;
				padding-left: 16px;
				list-style: none;
			}
			
			#box ul li img {
				width: 100px;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<ul>
				<li><a href="#"><img src="Itachi.jpg" /></a></li>
				<li><a href="#"><img src="luffy.jpg" /></a></li>
				<li><a href="#"><img src="naruto.jpg" /></a></li>
				<li><a href="#"><img src="onePiece.jpg" /></a></li>
			</ul>
		</div>

		<script type='text/javascript'>
			window.onload = function() {
				var oDiv = document.getElementById('box');
				var oUl = oDiv.getElementsByTagName('ul')[0];
				var oLi = oUl.getElementsByTagName('li');
				var speed = 2; //让ul开始就具有一个速度走动 
				oUl.innerHTML += oUl.innerHTML;
				oUl.style.width = oLi.length * oLi[0].offsetWidth + 'px';
				function fnMove() {
					if(oUl.offsetLeft > 0) {
						// 右移
						oUl.style.left = -oUl.offsetWidth / 2 + 'px';
					}else if(oUl.offsetLeft < -oUl.offsetWidth / 2) { //负数是因为ul的left是负数 　　　
						// 左移
						oUl.style.left = 0;
					}
					oUl.style.left = oUl.offsetLeft + speed + 'px'; //整个ul向右(左)移动 
				}
				var timer = null;
				clearInterval(timer);
				timer = setInterval(fnMove, 30);
				oUl.onmouseover = function() {
					clearInterval(timer);
				}
				oUl.onmouseout = function() {
					timer = setInterval(fnMove, 30); //当鼠标移开的时候执行这个定时器
				}
			}
		</script>
	</body>

</html>